<template>
  <n-space vertical size="large">
    <!-- 布局模式设置 -->
    <n-divider>布局设置</n-divider>
    <n-space vertical class="mb-0 mt-0" size="large">
      <!-- 布局模式设置 -->
      <n-card size="small" class="setting-card setting-card--layout">
        <template #header>布局模式</template>
        <n-space align="center" justify="space-around">
          <div
            v-for="item in modeOptions"
            :key="item.value"
            class="layout-mode-item"
            :class="{ active: layout.mode === item.value }"
            @click="layout.mode = item.value"
          >
            <LayoutModeIcon :type="item.value" :active="layout.mode === item.value" />
            <span class="layout-mode-label">{{ item.label }}</span>
          </div>
        </n-space>
      </n-card>

      <!-- 顶部菜单模式设置 -->
      <n-card v-if="layout.mode === 'top'" size="small" class="setting-card">
        <template #header>顶部菜单模式</template>
        <n-space vertical>
          <n-radio-group v-model:value="layout.topMenuMode" name="top-menu-mode">
            <n-space>
              <n-radio-button
                v-for="item in topMenuModeOptions"
                :key="item.value"
                :value="item.value"
              >
                {{ item.label }}
              </n-radio-button>
            </n-space>
          </n-radio-group>
          <n-space justify="space-between">
            <span>菜单高度</span>
            <n-input-number
              v-model:value="menuHeight"
              :min="40"
              :max="80"
              :step="4"
              @update:value="handleMenuHeightChange"
            >
              <template #suffix>px</template>
            </n-input-number>
          </n-space>
        </n-space>
      </n-card>

      <!-- 侧边栏设置 -->
      <n-card v-if="['side', 'mix'].includes(layout.mode)" size="small" class="setting-card">
        <template #header>侧边栏设置</template>
        <n-space vertical>
          <n-space justify="space-between">
            <span>菜单宽度</span>
            <n-space :size="8">
              <n-input-number
                v-model:value="tempMenuWidth"
                :min="120"
                :max="400"
                :step="10"
                :show-button="false"
                style="width: 120px"
              >
                <template #suffix>px</template>
              </n-input-number>
              <n-button
                size="small"
                type="primary"
                :disabled="tempMenuWidth === layout.menuWidth"
                @click="handleMenuWidthConfirm"
              >
                应用
              </n-button>
            </n-space>
          </n-space>
          <n-space justify="space-between">
            <span>侧边栏位置</span>
            <n-radio-group
              v-model:value="layout.siderPosition"
              size="small"
              @update:value="handleSiderPositionChange"
            >
              <n-radio-button value="left">左侧</n-radio-button>
              <n-radio-button value="right">右侧</n-radio-button>
            </n-radio-group>
          </n-space>
        </n-space>
      </n-card>

      <!-- 界面显示设置 -->
      <n-card size="small" class="setting-card">
        <template #header>界面显示</template>
        <n-space vertical>
          <n-space justify="space-between">
            <span>显示 Logo</span>
            <n-switch v-model:value="layout.showLogo" />
          </n-space>
          <n-space justify="space-between">
            <span>显示标签页</span>
            <n-switch v-model:value="layout.showTags" />
          </n-space>
          <n-space justify="space-between">
            <span>显示面包屑</span>
            <n-switch v-model:value="layout.showBreadcrumb" />
          </n-space>
          <n-space v-if="['side', 'mix'].includes(layout.mode)" justify="space-between">
            <span>显示折叠按钮</span>
            <n-switch v-model:value="layout.showCollapseButton" />
          </n-space>
          <n-space justify="space-between">
            <span>显示搜索框</span>
            <n-switch v-model:value="layout.showSearch" />
          </n-space>
        </n-space>
      </n-card>
    </n-space>

    <!-- 主题设置 -->
    <n-card size="small" class="setting-card setting-card--theme">
      <template #header>主题设置</template>
      <n-space vertical :size="8">
        <!-- 主题模式 -->
        <n-space justify="space-between" align="center">
          <span class="setting-label">主题模式</span>
          <n-space :size="4" align="center">
            <n-switch v-model:value="isDarkMode">
              <template #checked>
                <n-icon><moon-icon /></n-icon>
              </template>
              <template #unchecked>
                <n-icon><sun-icon /></n-icon>
              </template>
            </n-switch>
            <span class="setting-value">{{ isDarkMode ? '暗黑' : '亮色' }}</span>
          </n-space>
        </n-space>

        <!-- 主题色 -->
        <div class="theme-color">
          <n-space vertical :size="8">
            <span class="setting-label">主题色</span>
            <n-space wrap :size="8">
              <div
                v-for="color in presetColors"
                :key="color"
                class="color-block"
                :class="{ active: tempColor === color }"
                :style="{ backgroundColor: color }"
                @click="handleColorSelect(color)"
              ></div>
              <n-color-picker
                v-model:value="tempColor"
                :swatches="presetColors"
                :show-alpha="false"
                :actions="['confirm', 'clear']"
                :render-label="value => value || '自定义'"
                @confirm="handleColorConfirm"
                class="color-picker"
              />
            </n-space>
            <div class="mt-3 text-right">
              <n-button
                size="small"
                type="primary"
                :disabled="tempColor === layout.primaryColor"
                @click="handleSaveColor"
              >
                应用
              </n-button>
            </div>
          </n-space>
        </div>
      </n-space>
    </n-card>
  </n-space>
</template>

<script setup lang="ts">
  import { MoonIcon, SunIcon } from '@/components/Icon'
  import { useCssVar } from '@/hooks/useCssVar'
  import { useLayoutStore } from '@/store/modules/layout'
  import { storeToRefs } from 'pinia'
  import { computed, ref, watch } from 'vue'
  import LayoutModeIcon from './LayoutModeIcon.vue'

  const layoutStore = useLayoutStore()
  const { layout } = storeToRefs(layoutStore)

  // 布局模式选项
  const modeOptions = [
    { label: '侧边菜单', value: 'side' },
    { label: '顶部菜单', value: 'top' },
    { label: '混合菜单', value: 'mix' }
  ] as const

  // 顶部菜单模式选项
  const topMenuModeOptions = [
    { label: '嵌入式', value: 'embed' },
    { label: '分离式', value: 'separate' }
  ]

  // 预设主题色
  const presetColors = [
    '#1890ff', // 默认蓝色
    '#f5222d', // 红色
    '#13c2c2', // 青色
    '#722ed1' // 紫色
  ]

  // 主题色设置
  const tempColor = ref(layout.value.primaryColor)

  // 监听主题色变化，同步临时颜色
  watch(
    () => layout.value.primaryColor,
    color => {
      tempColor.value = color
    }
  )

  // 处理主题色变更
  const handleColorConfirm = (color: string) => {
    tempColor.value = color
    window['$message'].success('已选择新的主题色，点击应用生效')
  }

  // 保存主题色设置
  const handleSaveColor = () => {
    layoutStore.setPrimaryColor(tempColor.value)
    window['$message'].success('主题色已更新')
  }

  // 处理预设颜色选择
  const handleColorSelect = (color: string) => {
    tempColor.value = color
  }

  // 暗黑模式
  const isDarkMode = computed({
    get: () => layout.value.theme === 'dark',
    set: value => layoutStore.setTheme(value ? 'dark' : 'light')
  })

  // 临时菜单宽度
  const tempMenuWidth = ref(layout.value.menuWidth)

  // 监听菜单宽度变化
  watch(
    () => layout.value.menuWidth,
    width => {
      tempMenuWidth.value = width
    }
  )

  // 菜单高度设置
  const { value: menuHeight, setValue: setMenuHeight } = useCssVar<number>('--menu-height', 50)

  // 确认菜单宽度变更
  const handleMenuWidthConfirm = () => {
    layoutStore.setMenuWidth(tempMenuWidth.value)
    window['$message'].success('菜单宽度已更新')
  }

  const handleMenuHeightChange = (height: number) => {
    setMenuHeight(height)
  }

  // 侧边栏位置设置
  const handleSiderPositionChange = (position: 'left' | 'right') => {
    layoutStore.setSiderPosition(position)
  }
</script>

<style scoped>
  .setting-card {
    background-color: rgba(0, 0, 0, 0.02);
    border: 1px solid var(--n-border-color);
  }

  .setting-card :deep(.n-card-header) {
    font-size: 14px;
    padding: 10px 16px;
    font-weight: 500;
    border-bottom: 1px solid var(--n-border-color);
  }

  .setting-card :deep(.n-card__content) {
    padding: 12px 16px;
  }

  /* 布局模式相关样式 */
  .setting-card--layout .layout-mode-item {
    cursor: pointer;
    text-align: center;
    padding: 8px;
    border-radius: 4px;
    transition: all 0.3s;
    min-width: 80px;
  }

  .setting-card--layout .layout-mode-item:hover {
    background-color: rgba(0, 0, 0, 0.04);
  }

  .setting-card--layout .layout-mode-item.active {
    color: var(--primary-color);
    background-color: var(--n-color-hover);
  }

  .setting-card--layout .layout-mode-label {
    display: block;
    margin-top: 8px;
    font-size: 12px;
  }

  /* 主题设置相关样式 */
  .setting-card--theme :deep(.n-switch) {
    margin: 0;
  }

  /* 通用样式 */
  .setting-card :deep(.n-space) {
    width: 100%;
  }

  .setting-card :deep(.n-input-number) {
    width: 100px;
  }

  .setting-card :deep(.n-radio-group) {
    display: flex;
    justify-content: flex-end;
  }

  .setting-label {
    font-size: 14px;
    color: var(--n-text-color);
  }

  .setting-value {
    font-size: 13px;
    color: var(--n-text-color-2);
  }

  /* 主题设置相关样式 */
  .setting-card--theme :deep(.n-color-picker) {
    width: 120px;
    position: relative;
  }

  .setting-card--theme :deep(.n-color-picker .n-button) {
    width: 120px;
    height: 32px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 12px;
  }

  /* 自定义颜色按钮样式 */
  .setting-card--theme :deep(.n-color-picker .n-button::after) {
    content: '自定义';
    font-size: 14px;
    color: var(--n-text-color);
  }

  /* 修改确认按钮文案 */
  .setting-card--theme :deep(.n-color-picker-panel .n-button:first-child) {
    font-size: 14px;
  }

  .setting-card--theme :deep(.n-color-picker-panel .n-button:first-child::before) {
    content: '确定';
  }

  /* 颜色选择器弹出层样式 */
  .setting-card--theme :deep(.n-color-picker-panel) {
    margin-right: 0;
  }

  /* 主题色选择器样式 */
  .color-block {
    width: 32px;
    height: 32px;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.3s;
    position: relative;
    border: 2px solid transparent;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  }

  .color-block:hover {
    transform: scale(1.05);
  }

  .color-block.active {
    border-color: var(--primary-color);
    transform: scale(1.05);
  }

  .color-block.active::after {
    content: '';
    width: 6px;
    height: 6px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: white;
    border-radius: 50%;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  }

  .color-picker {
    margin: 0 !important;
  }

  .color-picker :deep(.n-button) {
    width: 32px !important;
    height: 32px !important;
    border-radius: 4px !important;
  }
</style>
